<template>
  <div class="sea-tree-node" @mouseover="mouseover" @mouseout="mouseout">
    <!--文本展示-->
    <span class="sea-tree-node-label"><i :class="data.icon"></i>  {{ data.label }}</span>

    <!--节点编辑区域-->
    <span v-show="show_actionbar" class="sea-tree-node-tools" @click.stop>
            <el-button type="text" size="mini"
                       v-show="can_modify" @click="modify">编辑</el-button>
            <el-button type="text" size="mini"
                       v-show="can_append" @click="append">添加</el-button>
            <el-button type="text" size="mini" class="text-orange"
                       v-show="can_remove" @click="remove">删除</el-button>
        </span>
  </div>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";

export default {
    name: "TreeNode",
    props: {
        // 树节点对象
        node: {type: Object}
        // 数据对象
        , data: {type: Object}
        // 最大层级限制，避免用户无限扩展树的节点
        , maxLevel: {type: Number, default: undefined}
        // 追加子节点
        , appendNode: {type: Function}
        // 移除子节点
        , removeNode: {type: Function}
        // 修改子节点
        , modifyNode: {type: Function}
    }
    , data() {
        return {
            // 是否显示操作面板
            show_actionbar: false,
            // 是否可追加节点
            can_append: undefined,
            // 是否可删除
            can_remove: undefined,
            // 是否可编辑
            can_modify: undefined,
        }
    }
    , watch: {
        node: {
            handler: function (val) {
                if (val) {
                    this.can_modify = true;
                }
                if (this.maxLevel === undefined || val.level < this.maxLevel) {
                    this.can_append = true;
                }
                if (Layers.isEmpty(val.childNodes)) {
                    this.can_remove = true;
                }
            },
            immediate: true
        }
    }
    , methods: {
        /**
         * 鼠标移入
         */
        mouseover: function () {
            this.show_actionbar = true;
        },
        /**
         * 鼠标移出
         */
        mouseout: function () {
            this.show_actionbar = false;
        },
        /**
         * 追加节点
         */
        append: function () {
            this.appendNode(this.data, this.node);
        },
        /**
         * 删除节点
         */
        remove: function () {
            this.removeNode(this.data, this.node);
        },
        /**
         *
         * 编辑节点
         */
        modify: function () {
            this.modifyNode(this.data, this.node);
        }
    }
}
</script>
